<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录注册界面</title>
    <link rel="stylesheet" type="text/css" href="/css/styles.css">
    <link rel="stylesheet" href="/css/verify.css">

</head>
<body>
<div class="jq22-container" style="padding-top:100px">
    <div class="login-wrap">
        <div class="login-html">
            <input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab">登录</label>
            <input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">注册</label>
            <div class="login-form">
                <form>
                    <div class="sign-in-htm">
                        <div class="group">
                            <label for="userId" class="label">用户名</label>
                            <input id="userId" name="userId" th:value="${id}" type="text" class="input">
                        </div>
                        <div class="group">
                            <label for="password" class="label">密码</label>
                            <input id="password" name="password" type="password" class="input" data-type="password">
                        </div>
                        <div class="group">
                            <div class="container">
                                <div id="captcha" style="position: relative" data-type="password"></div>

                            </div>
                        </div>
                        <div class="group">
                            <input id="check" type="checkbox" class="check" checked>
                            <label for="check"><span class="icon"></span> 保持登录</label>
                        </div>
                        <div class="group">
                            <input type="button" class="button" value="登录" onClick="sub()">
                        </div>
                        <div class="hr"></div>
                        <div class="foot-lnk">
                            <a href="#forgot">忘记密码?</a>
                        </div>
                    </div>
                </form>
                <form>
                    <div class="sign-up-htm">
                        <div class="group">
                            <label for="users" class="label">用户名</label>
                            <input id="users" type="text" class="input">
                        </div>
                        <div class="group">
                            <label for="pass" class="label">密码</label>
                            <input id="pass" type="password" class="input" data-type="password">
                        </div>
                        <div class="group">
                            <label for="pass2" class="label">重复密码</label>
                            <input id="pass2" type="password" class="input" data-type="password">
                        </div>
                        <div class="group">
                            <label for="email" class="label">邮箱地址</label>
                            <input id="email" type="text" class="input">
                        </div>
                        <div class="group">
                            <a href="register.html"><input type="submit" class="button" value="注册"></a>
                        </div>
                        <div class="hr"></div>
                        <div class="foot-lnk">
                            <label for="tab-1">已经成员?</a></label>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="/js/verify.js"></script>
<script>
    var flag=false;
    function sub(){
        var name=document.getElementById('userId').value;
        var pass=document.getElementById('password').value;
        var cname="admin";
        var cpass="123";

       /* if(name==cname && pass==cpass && flag==true){
            alert("登录成功!")
            //window.location.href="#";
        }else*/{
            if(flag==false){
                alert("验证失败!");
                return;
            }
        /*    alert("用户名或密码错误!")*/
            window.location.href = '/lo?userId='+name+'&password='+pass;
        }
    }
    jigsaw.init(document.getElementById('captcha'), function () {
        flag=true;
        document.getElementById('msg').innerHTML = '登录成功！'
    })

    function textPwd(){
        var pwd02=document.getElementById("pass");
        var pwd01=document.getElementById("pass2");
        if(pwd01.value!=pwd02.value) {
            document.getElementById("mgs1").innerHTML = "<font color='red'>两次密码不相同</font>";
            document.getElementById("submit").disabled = true;
        }
        else {
            document.getElementById("mgs1").innerHTML = null;
            document.getElementById("submit").disabled = false;
        }
    }
</script>
</body>
</html>